<script setup lang="ts">
import {formatMoney, monthFormat} from "@/utils/tools.ts";
import { Invoice } from "@/api/invoiceController.ts";
import { PropType } from "vue";
import router from "@/router";
import { useRoute } from "vue-router";

const route = useRoute();
const props = defineProps({
  list: {
    type: Array as PropType<Invoice[]>,
    default: [],
  },
  total: {
    type: Number,
    default: 0,
  },
  current: {
    type: Number,
    default: 1,
  },
  size: {
    type: Number,
    default: 10,
  },
});

const emit = defineEmits(["pageSizeChange", "change"]);

const goToDetail = (detail: Invoice) => {
  if (route.name === "发票管理(顺丰)") {
    router.push({
      name: "发票详情(顺丰)",
      query: {
        id: detail.id,
      },
    });
  } else {
    router.push({
      name: "发票详情(合丰)",
      query: {
        id: detail.id,
      },
    });
  }
};

const pageSizeChange = (pageSize: number) => {
  emit("pageSizeChange", pageSize);
};

const change = (page: number) => {
  emit("change", page);
};
</script>

<template>
  <div class="invoice-list">
    <a-empty v-if="!props.list.length" />
    <div
      class="invoice-item"
      v-for="item in props.list"
      @click="goToDetail(item)"
    >
      <div class="buyer-name">
        {{ item.buyer }}
      </div>
      <div class="tax-number">
        {{ item.taxNumber }}
      </div>
      <div class="invoice-count">¥ {{ formatMoney(item.invoiceCount) }}</div>
      <div class="date">
        {{ item.createTime }}
      </div>
      <div class="status">
        <a-tag color="gray" v-if="item.status === 'INIT'">未开票</a-tag>
        <a-tag color="blue" v-if="item.status === 'ADDED'">待验收</a-tag>
        <a-tag color="green" v-if="item.status === 'FINISHED'">已完成</a-tag>
      </div>
      <div class="month" v-if="item.month">
        <a-tag color="blue">{{ monthFormat(item.month) }}</a-tag>
      </div>
    </div>
  </div>
  <div class="pagination">
    <a-pagination
      :total="props.total"
      :page-size="props.size"
      :current="props.current"
      show-total
      show-page-size
      @page-size-change="pageSizeChange"
      @change="change"
    ></a-pagination>
  </div>
</template>

<style scoped lang="scss">
.invoice-list {
  padding: 5px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .invoice-item {
    position: relative;
    width: 300px;
    height: 100px;
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--color-neutral-3);
    background-color: #f8f8f8;
    cursor: pointer;

    padding: 10px;
    transition: transform 0.3s ease-in-out;
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .buyer-name {
      font-size: 18px;
      max-width: 250px;
    }
    .tax-number {
      font-size: 12px;
      color: #666666;
      margin-top: 6px;
    }
    .invoice-count {
      position: absolute;
      bottom: 5px;
      font-size: 25px;
      font-weight: bold;
    }
    .date {
      position: absolute;
      font-size: 12px;
      right: 10px;
      bottom: 10px;
      color: #666666;
    }
    .status {
      position: absolute;
      right: 10px;
      top: 10px;
    }
    .month {
      position: absolute;
      top: 40px;
      right: 10px;
    }
  }
}

.pagination {
  float: right;
}
</style>
